<template>
  <el-card class="box-card">
    <div slot="header" class="header">
      <span>{{ title }}</span>
      <span>
        <el-tag :type="titleTag" size="small">{{ titleUnit }}</el-tag>
      </span>
    </div>
    <div class="content">
      {{ content }}&nbsp;&nbsp;
      <span class="unit">{{ contentUnit }}</span>
    </div>
    <div class="bottom">
      <span>{{ bottomTitle }}</span>
      <span>
        {{ bottomContent }}
        <i :class="bottomIcon"></i>
      </span>
    </div>
  </el-card>
</template>
<script>
export default {
  props: [
    "title",
    "titleTag",
    "titleUnit",
    "content",
    "contentUnit",
    "bottomTitle",
    "bottomContent",
    "bottomIcon"
  ]
};
</script>
<style lang="scss" scoped>
.box-card {
  margin-right: 10px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content {
    font-size: 30px;
    font-weight: bold;
    color: #666;
    text-align: center;

    .unit {
      font-size: 16px;
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
}
</style>
